<template>
    <div class="goods-detail">
        <!-- 导航栏 -->
        <van-nav-bar title="商品详情" left-arrow @click-left="goBack" fixed>
            <template #right>
                <van-icon name="weapp-nav" size="18" />
            </template>
        </van-nav-bar>


        <div class="item-image">
            <img :src="goodsDetailData.goodsCoverImg" alt="">
        </div>
        <div class="title">
            {{ goodsDetailData.goodsName }}
        </div>
        <div class="tips">
            免邮费 顺丰快递
        </div>
        <div class="price">
            ￥{{ newPrice }}
        </div>

        <ul class="infoBar">
            <li>概述</li>
            <li>参数</li>
            <li>安装服务</li>
            <li>常见问题</li>
        </ul>

        <div class="rich-text" v-html="goodsDetailData.goodsDetailContent"></div>
        <!--  -->
        <!-- 动作栏 -->
        <van-action-bar>
            <van-action-bar-icon icon="chat-o" text="客服" color="#ee0a24" @click="onhandle"/>
            <van-action-bar-icon icon="cart-o" text="购物车" :badge="store.itemNumInCart" @click="toCart"/>
            <van-action-bar-button type="warning" text="加入购物车" @click="addToCart" />
            <van-action-bar-button type="danger" text="立即购买"  @click="purchaseNow"/>
        </van-action-bar>
    </div>
</template>

<script setup>
import { ref, reactive, onMounted } from "vue"
import { useRoute, useRouter } from "vue-router";
import { getGoodsDetailData, addGoodsToCart, getCartData } from '@/api/index.js'
import { showNotify, showToast, showSuccessToast } from "vant";
import { useCartStore } from '@/store/useCartStore.js'

let store = useCartStore()

let route = useRoute();
let router = useRouter();


let goodsDetailData = reactive({})
let newPrice = ref()
let goodsNumInCart = ref()

onMounted(() => {
    getGoodsDetailData(route.params.goodsId).then(res => {
        let { data, resultCode, message } = res;
        if (resultCode == 200) {
            for (let key in data) {
                goodsDetailData[key] = data[key]
            }
        }

        // 格式化价格 保留两位小数
        newPrice.value = goodsDetailData.sellingPrice.toFixed(2)
    })

    // // 获取购物车中的商品信息以渲染角标
    // getCartData().then(res => {
    //     if (res.resultCode == 200) {
    //         goodsNumInCart.value = res.data.length
    //     }
    // })
    store.GetCartData()
})




// 点击返回
let goBack = () => {
    router.back()
}

// 加入商品至购物车
let addToCart = () => {
    addGoodsToCart({
        goodsCount: 1,
        goodsId: route.params.goodsId,
    }).then(res => {
        if (res.resultCode == 200) {
            showSuccessToast({
                message: '加入购物车成功♥♥~~',
                duration: 700,
            })

            // // 获取购物车中的商品信息以渲染角标
            // getCartData().then(res => {
            //     if (res.resultCode == 200) {
            //         goodsNumInCart.value = res.data.length
            //     }
            // })
            store.GetCartData()
        } else {
            showNotify({
                type: 'warning',
                message: res.message,
                duration: 700,
            })
        }
    })
}

// 点击跳转购物车
let toCart = () => {
    router.push('/cart')
}
// 点击立即购买
let purchaseNow = () => {
    addGoodsToCart({
        goodsCount: 1,
        goodsId: route.params.goodsId,
    }).then(res => {
        if (res.resultCode == 200) {
            // showSuccessToast({
            //     message: '加入购物车成功♥♥~~',
            //     duration: 700,
            // })

            store.GetCartData()
        } else {
            showNotify({
                type: 'warning',
                message: res.message,
                duration: 700,
            })
        }
    }).then(() => {
        router.push('/cart')
    })
}
// 点击客服
let onhandle = () => {
    showToast({
        type: 'fail',
        message: '招募中~~欢迎应聘~~O(∩_∩)O',
        duration:1000
    })
}
</script>

<style scoped lang="less">
.goods-detail {
    .item-image {
        width: 100%;
        margin-top: 1.5rem;

        img {
            width: 100%;
        }
    }

    .title {
        font-size: .5rem;
        padding: .2rem;
    }

    .tips {
        font-size: .4rem;
        color: gray;
        padding: .2rem;
    }

    .price {
        color: orangered;
        padding: .2rem;
    }

    .infoBar {
        display: flex;
        height: 1rem;
        align-items: center;
        margin: .5rem 0;

        li {
            flex: 1;
            text-align: center;
            font-size: .4rem;
            height: 100%;
            line-height: 1rem;
            border-right: 1px solid #ccc;

        }

        li:last-of-type {
            border: none;
        }
    }

    .rich-text {
        margin-bottom: 1rem;
    }

}
</style>